<template>
	<view class="hx-store" @touchstart="touchStart">
		<!-- 只需要绑定购物车位置即可 -->
		<flyInCart ref="inCart" :cartBasketRect="cartBasketRect"></flyInCart>
		<!-- 头部 -->
		<view class="header">
			<image class="header-bg" :src="storeInfo.storePic" mode="" style="height: 204px;"></image>
			<view :class="showStoreBox ? 'header-bg-gray' : 'header-bg-black'"></view>
			<view class="header-top-Placeholder"></view>
			<view class="container storeInfo hx-shadow" :style="{height:storeInfoBoxHeight + 'px'}">
				<image class="storeAvatar hx-shadow" :src="storeInfo.storeLogo" mode=""></image>
				<view class="hx-txt-18 hx-color-black hx-txt-weigth hx-mb-10 ">
					{{storeInfo.storeName||''}}
				</view>
				<view class="hx-txt-14 hx-color-gray flex-a" @click="getLocaltion">
						<uni-icons type="location" size="16" color="#bbbbbb"></uni-icons>
						<view class="address">{{storeInfo.place+storeInfo.initPlace}}</view>
						<uni-icons type="right" size="16" color="#bbbbbb"></uni-icons>
				</view>
				<view class="hx-txt-12 hx-color-gray ">
					<!-- <view>公告：本店今日开张，欢迎新老用户下单，一律八折优惠</view>
					<view>{{'联系电话：'+storeInfo.storeLepPhone}}</view> -->
				</view>
				<!-- <view class="">
					后续再扩展优惠券，满减，折扣，活动等功能
				</view> -->
				<view class="shrink-box">
					<i class="hxicon" :class="showStoreBox ? 'icon-fold' : 'icon-unfold'"
						@click="showStoreBox = !showStoreBox"></i>
				</view>
			</view>
			<!-- vip会员 -->
			<!-- <view class="pay-vip flex-b flex-a">
				<view>
					<view class="title">张三宠物店会员卡</view>
					<view class="sub">尊享会员权益</view>
				</view>
				<view class="check" @click="addVip" v-if="!isVip">
					领取
				</view>
				<view class="check" @click="toVip" v-else>
					查看权益
				</view>
			</view> -->
		</view>
		<!-- 主体 -->
		<view class="main" :style="{height: mainHeight}">
			<view class="tabs-box"
				:style="{'top': 'calc(44px + ' + statusBarHeight + 'px)','background-color':'rgba(245,245,245,0.5)'}">
				<view class="" style="width: 210px; height: 100%;">
					<view class="hx-tabs">
						<view class="hx-tabs-item" v-for="(item,i) in tabs" :key="i"
							:class="{'hx-tabs-active': swiperCurrent == i}" @click="swiperChange(i)"
							:style="{transition: transtionTime + 'ms'}">
							<text>{{item.name}}</text>
						</view>
						<view class="hx-tabs-slider-box"
							:style="{transition: transtionTime + 'ms',left:swiperCurrentSliderLeft + 'px'}">
							<view class="hx-tabs-slider"></view>
						</view>
					</view>
				</view>
			</view>
			<swiper id="mainSwiper" style="height: 100%;" :current="swiperCurrent" :duration="transtionTime"
				@transition="transition" @animationfinish="animationfinish">
				<!-- 购物 -->
				<swiper-item class="swiper-item" :key="ind">
					<view class="scroll-items">
						<view class="category-list">
							<!-- 左侧分类导航 -->
							<scroll-view :scroll-top="menuScrollTop" :scroll-y="goodsBoxScroll" class="left">
								<view v-for="item in categoryList" :key="item.id" class="row"
									:class="{active: item.id == menuCurrentId}" @click="showCategory(item)">
									<view class="text">
										{{item.name}}
									</view>
									<view class="row-number" v-if="item.number">
										{{item.number}}
									</view>
								</view>
							</scroll-view>
							<!-- 右侧子导航 -->
							<scroll-view scroll-with-animation :scroll-y="goodsBoxScroll" class="right"
								@scroll="asideScroll" :scroll-top="tabScrollTop">
								<view class="goodsListBox">
									<view class="category" v-for="item in categoryList" :key="item.id"
										:id="'goodsBox'+item.id">
										<view class="s-item">{{item.name}}</view>
										<view class="list" v-if="goodsShow">
											<view class="box" v-for="(rowData,i) in goodsList" :key="rowData.id"
												v-if="item.id == rowData.sedCate">
												<!-- 商品列表 -->
												<!-- <m-store-pro @touchOnGoods="touchOnGoods" :rowData="box"></m-store-pro>
													 -->
												<!-- 商品列表 -->
												<view class="m-store-item">
													<view class="m-img" @click="hrefGoodsInfo(rowData.id)">
														<image style="width: 100%;height: 100%;" :src="rowData.url"
															mode="aspectFit"></image>
													</view>
													<view class="m-text">
														<view class="m-title" @click="hrefGoodsInfo(rowData.id)">
															{{rowData.name}}
														</view>
														<view class="m-descripe">
															<!-- {{rowData.storeInfo}} -->
														</view>
														<block v-if="rowData.prodSpecInfoList">
															<view class="m-price-box">
																<view class="symbol">￥</view>
																<view class="m-price">{{rowData.prodSpecInfoList[0].specSellingPrice}}</view>
																<view class="m-old-price" v-if="rowData.prodSpecInfoList[0].specOriginalPrice">
																	<text>￥{{rowData.prodSpecInfoList[0].specOriginalPrice}}</text>
																</view>
															</view>
														</block>
														<block v-else>
															<view class="m-price-box">
																<view class="symbol">￥</view>
																<view class="m-price">{{rowData.memPrice}}</view>
																<view class="m-old-price" v-if="rowData.retPrice">
																	<text>￥{{rowData.retPrice}}</text>
																</view>
															</view>
														</block>
														<view class="m-distance">
															<block v-if="rowData.prodSpecInfoList">
																<view class="miniBtn" @click="showForm(rowData)">
																	<text>选规格</text>
																	<!-- #ifdef APP-PLUS || H5 -->
																	<view class="num" v-if="getCartGoodsNum(rowData)">
																		{{getCartGoodsNum(rowData)}}
																	</view>
																	<!-- #endif -->

																</view>
															</block>
															<block v-else>
																<view :class="'addEle_' + i" class="jumpPosition">
																</view>
																<hx-number-box @change="goodsListAddReduce"
																	:value="rowData.addNum" :rowData="rowData"
																	:clickTime="animaTime"
																	@addChange="touchOnAddGoods('.addEle_' + i,rowData)">
																</hx-number-box>
															</block>
															<!-- <image @click="touchOnAddGoods('.addEle_' + i,rowData)" style="width:20px;height: 20px;" src="../../static/img/icon/shop_icon_buy.png" mode="aspectFit"></image>
															 -->
														</view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
				</swiper-item>
				<!-- 评价 -->
				<!-- <swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;background-color: #ffffff;"
						@scroll="asideScroll" :scroll-y="goodsBoxScroll">
						<view class="scroll-items evaluate-box">
							<view class="evaluate-box-header">
							</view>
							<view class="evaluate-box-body">
							</view>
							<hx-comment :listData="commentList" :info="info"></hx-comment>
						</view>
					</scroll-view>
				</swiper-item> -->
				<!-- 商家 -->
				<swiper-item class="swiper-item">
					<view class="scroll-items business-box">
						<!-- <view class="info-list hx-mt-15">
							<view class="info-list-container">
								<i class="hxicon-location"></i>
								<text>{{storeInfo.place+storeInfo.initPlace}}</text>
							</view>
						</view> -->

						<!-- <view class="info-list hx-mt-15 ">
							<view class="info-list-container hx-bb">
								<i class="hxicon-time"></i>
								<text>配送时间：{{ storeInfo.delivery_time }}</text>
							</view>
						</view> -->
						<view class=" info-list">
							<view class="info-list-container" @click="goCall(storeInfo.storeLepPhone)">
								<i class="hxicon-phone"></i>
								<text style="flex: 1;">商家电话：{{ storeInfo.storeLepPhone }}</text>
								<view class="right">
									<text>拨打</text><i class="hxicon-right"></i>
								</view>
							</view>
						</view>
						<view class="info-list hx-mt-15">
							<view class="info-list-container" @click="showStoreBoxFunc">
								<i class="hxicon-new" style="color:#ff3333"></i>
								<text style="flex: 1;">商家当前热门活动</text>
								<view class="right">
									<text>查看</text><i class="hxicon-right"></i>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 购物车 -->
		<view class="foot" @touchmove.stop.prevent="mpClear" :style="{height: footHeight}" v-if="showFoot">
			<view class="zz" @click="hideShoppingCar"></view>
			<view class="btn-box">
				<view class="btn-box-left">
					<view class="imgBox">
						<image src="./../../static/store/order.png" mode=""></image>
					</view>
					<text>订单</text>
				</view>
				<!-- <view class="btn-box-line"></view> -->
				<view class="btn-box-center" @click="showShoppingCar">
					<view class="cart" :animation="cartAnimationData">
						<view class="tag cartNum" v-if="goodsTotalNumber>0">{{goodsTotalNumber}}</view>
						<image :src="goodsTotalNumber ? '/static/store/shopcart.png' : '/static/store/shopcart.png'" mode="">
						</image>
					</view>
					<view class="priceBox">
						<view class="hx-txt-18 hx-color-white" v-if="goodsTotalPrice>0">
							￥{{goodsTotalPrice}}
						</view>
						<view class="hx-txt-10 hx-color-white">
							另需配送费￥{{shippingDees}}
						</view>
					</view>
					<view class="btn-box-right">
						<view class="jiesuan" v-if="goodsTotalPrice>0 && goodsTotalPrice >= startingPrice" @click="jiesuan">
							去结算
						</view>
						<view class="pscj hx-txt-10 jiesuan" v-else>
							<text v-if="startingPrice>0">差￥{{-(goodsTotalPrice-startingPrice)}}起送</text>
						</view>
					</view>
				</view>
			</view>
			<view class="cart-box" :style="{display: showCar ? 'flex' : 'none'}">
				<view class="box-container rebate-box" v-if="showDiscount">
					<!-- <text>已享100减25</text> -->
				</view>
				<view class="box-container operating-box">
					<view class="operating-box_right">
					</view>
					<view class="operating-box_left clear" @click="clearShoppingCart">
						<i class="hxicon-delete"></i>
						<text>清空购物车</text>
					</view>
				</view>
				<!-- 购物车列表 -->
				<view class=" goods-box">
					<view class="" style="flex: 1;">
						<scroll-view scroll-y="true" class="goods-list-scroll" :scroll-top="carGoodsScrollTop">
							<view class="goods-list">
								<view class="box" v-for="(rowData,i) in shoppCart" :key="rowData.id"
									v-if="rowData.addNum>0">
									<view class="m-store-item">
										<view class="m-img">
											<image style="width: 100%;height: 100%;" :src="rowData.image"
												mode="aspectFit"></image>
										</view>
										<view class="m-text">
											<view class="m-title">
												{{rowData.name}}
											</view>
											<view class="m-descripe">
												{{rowData.name?'规格：'+rowData.name:''}}
											</view>
											<view class="m-price-box">
												<view class="symbol">￥</view>
												<view class="m-price">{{rowData.price||rowData.memPrice}}</view>
												<view class="m-old-price" v-if="rowData.oldprice">
													<text>￥{{rowData.oldprice}}</text>
												</view>
											</view>
											<view class="m-distance">
												<view :class="'addEle2_' + rowData.id" class="jumpPosition">
												</view>
												<hx-number-box @change="cartAddOrReduce" :value="rowData.addNum"
													:rowData="rowData" :clickTime="animaTime"
													@addChange="touchOnAddGoods('.addEle2_' + rowData.id,rowData)">
												</hx-number-box>
											</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
		<!-- v-if="showFormBox" -->
		<!-- 多规格 -->
		<uni-popup ref="popup" type="bottom" @change="popupChange">
			<view class="form-main" v-if="currentGoodsData.name">
				<view class="form-main_ctn" @click.stop.prevent="mpClear">
					<view class="godos_tit">
						<view class="flex-a">
							<view class="img"><img :src="currentGoodsData.url[0]" alt=""></view>
							<view class="info">
								<view class="title">{{currentGoodsData.name}}</view>
								<view class="flex">
									<view class="select">已选：</view>
									<view class="select_gg_box">
										<block v-for="element in currentGoodsData.prodSpecInfoList" :key="element.id"
											v-if="element.select == true">
											<view class="gg-item">
												<text>{{element.specName}}</text>
												<!-- <text class="gg-item-cut">,</text> -->
											</view>
										</block>
									</view>
								</view>
								<view class="price">￥
									<!-- <text>{{currentGoodsData.retPrice}}</text> -->
									<block v-for="(ele,i) in currentGoodsData.prodSpecInfoList" :key="i"
										v-if="ele.select == true">
										<text class="price">{{ele.specSellingPrice}}</text>
									</block>
								</view>
							</view>
						</view>
					</view>
					<view class="gg_tit">
						<text>规格</text>
					</view>
					<view class="gg_box">
						<block v-for="item in currentGoodsData.prodSpecInfoList" :key="item.id">
							<view :class="item.select?'item active':'item'"
								@click="selectGoodsForm(currentGoodsData,item)">{{item.specName}}
								<text>￥{{item.specSellingPrice}}</text>
							</view>
						</block>
					</view>
					<view class="num flex-a flex-b">
						<view>
							数量
						</view>
						<view>
							<hx-number-box @change="formAddGoodsChange" :value="currentGoodsData.number"
								:rowData="currentGoodsData"
								@addChange="touchOnAddGoods('.addEle_gg',currentGoodsData)"></hx-number-box>
						</view>
					</view>
					<view class="btn"><button  @click="formFirstAddGoods()" type="primary" style="background: #47B6FE;border-radius:20px; #fff;heigt:30px;line-height: 30px;text-align: center;">选好了</button></view>
					<!-- <view class="select_gg">
						<text class="lable">已选规格：</text>
						<view class="select_gg_box">
							<block v-for="element in currentGoodsData.prodSpecInfoList" :key="element.id"
								v-if="element.select == true">
								<view class="gg-item">
									<text>{{element.specName}} </text>
									<text class="gg-item-cut">,</text>
								</view>
							</block>
						</view>
					</view> -->
					<view class="bottom">
						<!-- <view class="price_box">
							<text>￥</text>
							<block v-for="(ele,i) in currentGoodsData.prodSpecInfoList" :key="i"
								v-if="ele.select == true">
								<text class="price">{{ele.specSellingPrice}}</text>
							</block>
						</view> -->
						<!-- <view class="form-btn-box">
							<block v-if="!currentGoodsData.number">
								<view id="ggAddBtn" class="add-btn" @click="formFirstAddGoods()">
									<i class="hxicon-add" id="eleAdd"></i>
									<text>加入购物车</text>
								</view>
							</block>
							<block v-else>
								<view class="addEle_gg jumpPosition"></view>
								<hx-number-box @change="formAddGoodsChange" :value="currentGoodsData.number"
									:rowData="currentGoodsData" :clickTime="animaTime + 200"
									@addChange="touchOnAddGoods('.addEle_gg',currentGoodsData)"></hx-number-box>
							</block>
						</view> -->
					</view>
				</view>
				<!-- <view class="close" @click="hiddenForm()">
					<i class="hxicon-close"></i> 
				</view> -->
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import hxNavbar from '@/components/hx-navbar/hx-navbar.vue';
	import jumpBall from '@/components/hx-jump-ball/hx-jump-ball.vue';
	import hxNumberBox from "@/components/uni-number-box/uni-number-box.vue";
	import hxComment from "@/components/hx-comment/hx-comment.vue";
	//  加入购物车动画组件
	import flyInCart from '@/components/flyInCart.vue'
	//引入测试数据
	import testData from "@/common/testdata.js";
	import {
		getProducts,
		getCategory,
		postCartAdd,
		getStoreCartList,
		restCart,
		replyList,
		configByStore,
		getServersClass,
		getVipInfo,
		addVipInfo,
		getStoreByStoreNo
	} from '../../api/store.js'
	import {
		toLogin
	} from '@/libs/login';
	import {
		mapGetters
	} from "vuex";
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight;

	export default {
		computed: mapGetters(['isLogin']),
		components: {
			jumpBall,
			hxNavbar,
			hxNumberBox,
			hxComment,
			flyInCart
		},
		data() {
			return {
				info: {},
				goodsShow: true,
				servesClassList: [], //服务分类
				storeNo: '',
				isVip: false,
				pageScroll: {},
				//商家信息
				storeData: [],
				//商品列表
				goodsList: [],
				//商品分类信息列表
				categoryList: [],
				//评论列表
				commentList: [],
				//默认禁止商品栏滚动
				goodsBoxScroll: false,
				statusBarHeight,
				//动画时间
				animaTime: 300,
				storeInfo:{},
				//商家盒子高度
				storeInfoBoxHeight: 100,
				//展开门店信息容器
				showStoreBox: false,
				num: 1,
				cartAnimationData: {},
				//tabs
				tabs: [{
						name: '商品'
					},
					// {
					// 	name: '评价'
					// },
					{
						name: '商家'
					},
				],
				swiperCurrent: 0,
				dx: 0,
				swiperCurrentSliderLeft: 0,
				transtionTime: 100,

				//所有购物车
				shoppingCartAll: [],
				//显示购物车
				showFoot: true,

				//配送费
				shippingDees: 0,
				//配送起步价
				startingPrice: 15,

				//购物车商品价格合计
				goodsTotalPrice: 0,
				//购物车商品数量合计
				goodsTotalNumber: 0,
				//当前门店购物车
				shoppCart: [],
				//foot 高度
				footHeight: '0',
				//显示购物车
				showCar: false,
				//购物车中商品滚动条位置
				carGoodsScrollTop: 0,
				//购物车缓存 Storage 名称
				shoppingCartStorageName: 'shopping_cart',

				sizeCalcState: false,
				tabScrollTop: 0,

				mainHeight: 0,
				menuCurrentId: 1,
				//购物车显示折扣
				showDiscount: true,
				//手指触摸滑动
				touchData: {},
				//页面滚动条距离顶部的距离
				pageScrollTop: 0,

				menuScrollTop: 0,

				//多规格当前产品
				currentGoodsData: {},
				//显示规格容器
				showFormBox: false,
				//显示规格动画
				formAnimationData: {},

				//购物车位置数据
				cartBasketRect: {},

				navStatus: true,
				isBack: true,
				isFu: false,
				cartId: ''
			}
		},
		async onLoad(option) {
			const that = this
			uni.showLoading({
				title: '加载中'
			});
			if (option.storeNo) {
				this.storeNo = option.storeNo
				that.$nextTick(() => {
					that.getProducts()
					that.getCategory()
					that.getStoreCartList()
					that.getVipInfo()
				})
			}
			//模拟请求数据
			setTimeout(() => {
				//商家信息
				// that.storeData = testData.storeData,
				//商品列表
				// that.goodsList = testData.goodsData;
				//商品分类信息列表
				// that.categoryList = testData.categoryData;
				//评论列表
				// that.commentList = testData.commentData,
			}, 500)
		},
		onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
		    return {
		      title: this.storeInfo.storeName,
		      path: 'pages/store/index?storeNo='+this.storeNo,
			  imageUrl: this.storeInfo.storePic
		    }
		},
		// onShareAppMessage() {//转发个人
		// 		   return {
		// 		    title: this.storeInfo.storeName,
		// 		    path: 'pages/store/index&storeNo='+this.storeNo,
		// 		    imageUrl: this.storeInfo.storePic
		// 		   };
		// 		  },
		onReady() {
			const that = this
			let sysInfo = uni.getSystemInfoSync();
			//屏幕高度 - 头部导航高度 - 状态栏高度 - 分页高度
			this.mainHeight = sysInfo.screenHeight - 43 - statusBarHeight - 40 + 'px';
			let q = uni.createSelectorQuery()
			setTimeout(function() {
				q.select('.cart').boundingClientRect(data => {
					that.cartBasketRect = data
				}).exec();
			}, 100)
			that.calcSize();
		},
		onBackPress(event) {
			if (this.showFormBox) {
				this.hiddenForm()
				return true
			}
			if (!this.isBack) {
				this.$refs.popup.close()
				return true
			}
		},
		onShow() {
			uni.hideLoading();
			getStoreByStoreNo({storeNo:this.storeNo}).then(res=>{
				if(res.code==200){
					this.storeInfo=res.data
				}
			})
		},
		mounted() {
			let that = this
		},
		watch: {
			showStoreBox(val, oldVal) {
				if (val == true) {
					this.showStoreBoxFunc();
				} else {
					this.hiddenStoreBoxFunc();

				}
			}
		},

		onPageScroll(e) {
			let that = this
			let top = e.scrollTop
			that.pageScrollTop = e.scrollTop
			that.pageScroll = e
			let view = uni.createSelectorQuery().select(".main");
			view.fields({
				rect: true
			}, data => {
				if (data != null) {
					if (data.top <= statusBarHeight + 44) {
						that.goodsBoxScroll = true
					} else {
						that.goodsBoxScroll = false
					}
				}

			}).exec();
		},
		onShareTimeline(){//分享朋友圈
			return {
				title: this.storeInfo.storeName, //分享标题
				path: 'pages/store/index&storeNo='+this.storeNo, // 可不填 传递的参数，只能是这 
				imageUrl:  this.storeInfo.storeLogo//封面图
			}
		},
		// onShareTimeline() {
		//       uni.share({
		//         provider: 'weixin',
		//         type: 0,
		//         imageUrl: 'https://example.com/path/to/your/image.jpg', // 分享图片的URL
		//         title: '分享标题', // 分享的标题
		//         summary: '分享内容摘要', // 分享内容的摘要
		//         query: '分享的查询参数', // 需要分享的参数，可选
		//         success: function (res) {
		//           console.log('分享成功', res);
		//         },
		//         fail: function (err) {
		//           console.error('分享失败', err);
		//         }
		//       });
		//     },
		methods: {
			//获取商品列表
			getProducts() {
				getProducts({
					storeNo: this.storeNo,
					isFu: this.isFu
				}).then(res => {
					if (res.code == 200) {
						res.data.forEach(item => {
							item.prodSpecInfoList.forEach(ele => {
								ele.select = false
							})
						})
						let cart = uni.getStorageSync('cart');
						if (cart) {
							cart.forEach(item => {
								res.data.forEach(ele => {
									if (item.id == ele.id) {
										ele.addNum = item.number
									}
								})
							})
						}
						this.goodsList = res.data
						console.log("获取商品列表")
						console.log(this.goodsList)
					}
				})
			},
			//获取商品分类
			getCategory() {
				getCategory({
					storeNo: this.storeNo,
					isFu: this.isFu
				}).then(res => {
					if (res.code == 200) {
						this.categoryList = res.data
					}
				})
			},
			//获取服务分类
			getServersClass() {
				getServersClass({
					storeNo: this.storeNo,
					isFu: this.isFu
				}).then(res => {
					if (res.code == 200) {
						this.servesClassList = res.data
					}
				})
			},
			// 查看会员中心
			getVipInfo() {
				getVipInfo({
					storeNo: this.storeNo
				}).then(res => {
					if (res.code == 200) {
						this.isVip = res.data ? true : false
					}
				})
			},
			popupChange(e) {
				this.isBack = !e.show
			},
			//显示 规格
			showForm(rowData) {
				var that = this;
				rowData.number=1
				rowData.prodSpecInfoList[0].select=true
				that.currentGoodsData = rowData
				that.$refs.popup.open()
			},
			//隐藏规格
			hiddenForm() {
				this.$refs.popup.close();
			},
			formFirstAddGoods() {
				let that = this
				that.formAddGoodsChange('plus', 1, that.currentGoodsData)
				that.touchOnAddGoods('#ggAddBtn', that.currentGoodsData)
				this.$refs.popup.close();
			},
			//查看权益
			toVip() {
				uni.navigateTo({
					url: '/pages/store/vip?storeNo=' + this.storeNo
				})
			},
			// 领取会员
			addVip() {
				addVipInfo({
					storeNo: this.storeNo
				}).then(res => {
					if (res.code == 200) {
						this.isVip = true
						this.getVipInfo()
					}
				})
			},
			//加入购物车
			formAddGoodsChange(type, number, goodsData) {
				let that = this,
					productId = '',
					productAttrUnique = '';
				if (number >= 1) {
					for (let i in goodsData.prodSpecInfoList) {
						if (goodsData.prodSpecInfoList[i].select == true) {
							productId = goodsData.prodSpecInfoList[i].productId
							productAttrUnique = goodsData.prodSpecInfoList[i].id
							that.currentGoodsData.current_form = goodsData.prodSpecInfoList[i]
							break
						}
					}
				}
				that.addGoodsChange(type, number, that.currentGoodsData)
				that.postCart({
					storeNo: that.storeNo,
					cartNum: type == 'plus' ? 1 : -1,
					productId,
					productAttrUnique
				})
			},
			//商品列表添加-减少到购物车
			goodsListAddReduce(type, number, row) {
				let that = this
				if (that.isLogin) {
					that.addGoodsChange(type, number, row)
					console.log(row)
					that.postCart({
						storeNo: that.storeNo,
						cartNum: type == 'plus' ? 1 : -1,
						productId: row.productId,
						// productAttrUnique: row.productAttrValues[0].id,
						productAttrUnique: row.productAttrUnique,
					})
				} else {
					//本地缓存购物车列表
					let cartList = uni.getStorageSync('cart') || [];
					console.log("商品列表添加-减少到购物车")
					console.log(cartList)
					let ind = cartList.findIndex(item => {
						return item.id == row.id
					})
					if (ind == -1) {
						row.number = 1
						row.addNum = 1
						cartList.push(row)
					} else {
						cartList[ind].number = type == 'plus' ? cartList[ind].number + 1 : cartList[ind].number - 1
						cartList[ind].addNum = type == 'plus' ? cartList[ind].addNum + 1 : cartList[ind].addNum - 1
					}
					let num = 0,
						totalprice = 0
					cartList.forEach(item => {
						num += item.addNum
						totalprice += item.addNum * item.memPrice
					})
					that.goodsTotalNumber = num
					that.goodsTotalPrice = totalprice
					console.log("33333333")
					console.log(that.goodsTotalPrice)
					uni.setStorageSync('cart', cartList);
				}
			},
			//购物车列表添加-减少
			cartAddOrReduce(type, number, row) {
				let that = this
				that.goodsListAddReduce(type, number, row)
				if(!that.isLogin){
					that.getProducts()
				}
			},
			//提交到后台购物车
			postCart(data) {
				postCartAdd(data).then(res => {
					if (res.code == 200) {
						this.getProducts()
						this.getStoreCartList()
					}
				})
			},
			//选择规格
			selectGoodsForm(goods, item) {
				let that = this
				let data = goods.prodSpecInfoList
				let n = null
				for (var i in data) {
					if (data[i].id == item.id) {
						data[i].select = true
					} else {
						data[i].select = false
					}
				}
				let goodsCart = that.getStoreCart()
				goodsCart.forEach(element => {
					if (element.productId == item.productId && element.productAttrUnique == item.id) {
						n = element.cartNum
					}
				})
				// goods.number = n
				goods.number = 1
				that.currentGoodsData = goods
			},

			//获取该商品在购物车的数量
			getCartGoodsNum(goods) {
				let cart = this.getStoreCart()
				let n = 0
				if (cart) {
					for (let i in cart) {
						if (cart[i].id == goods.id) {
							n += cart[i].number
						}
					}
				}
				return n
			},
			//获取门店购物车
			getStoreCart() {
				const that = this
				return that.shoppCart
			},
			//获取评论列表
			getReplyList() {
				//评论列表
				replyList(this.storeNo, 0).then(res => {
					if (res.code == 200) {
						this.commentList = res.data.list
					}
				})
				//获取店铺评分
				configByStore(this.storeNo).then(res => {
					if (res.code == 200) {
						this.info = res.data
					}
				})
			},
			getLocaltion(){
				uni.openLocation({
					latitude: Number(this.storeInfo.lat),
					longitude: Number(this.storeInfo.lng),
					success: function () {
						console.log('success');
					}
				});
			},
			//点击tab切换swiper
			swiperChange(index) {
				this.swiperCurrent = index;
				if (index == 1) {
					this.getServersClass()
				}
				if (index == 2) {
					this.getReplyList()
				}
				if (index == 0) {
					this.getProducts()
					this.getCategory()
				}
				this.swiperCurrentSliderLeft = 70 * index;
			},
			transition({
				detail: {
					dx
				}
			}) {
				// this.$refs.tabs.setDx(dx);
			},
			// swiper动画完成
			animationfinish({
				detail: {
					current
				}
			}) {
				/* this.$refs.tabs.setFinishCurrent(current); */
				this.swiperCurrent = current;
				this.current = current;
				this.showFoot = current == 0 && this.showStoreBox != true ? true : false;
			},
			//一级分类点击
			showCategory(item) {
				// const that = this
				// that.isBoxScroll = true;
				// that.menuCurrentId = item.id;
				// console.log(item)
				// setTimeout(() => {
				// 	let index = that.categoryList.findIndex(sitem => sitem.id === item.id);
				// 	that.tabScrollTop = that.categoryList[index].top;
				// 	that.isBoxScroll = false
				// }, 100)
				
			},
			//右侧栏滚动
			asideScroll(e) {
				const that = this;
				const scrollTop = Math.round(e.detail.scrollTop);
				that.calcSize()
				const tabs = that.categoryList.filter(item => item.top <= scrollTop).reverse();
				if (tabs.length > 0) {
					that.menuCurrentId = tabs[0].id;
				}
				const menuNum = that.categoryList.length
				const cNum = tabs.length
				// 定位在第4个分类，当分类滑动到第4格时将不再变换位置。
				const n = 4
				if (cNum > n) {
					that.menuScrollTop = (cNum - n) * 45
				} else {
					that.menuScrollTop = 0
				}
			},
			//计算右侧栏每个tab的高度等信息
			calcSize(event) {
				let h = 0;
				// if(this.sizeCalcState){
				// 	return false
				// }
				this.categoryList.forEach(item => {
					let view = uni.createSelectorQuery().select("#goodsBox" + item.id);
					view.fields({
						size: true
					}, data => {
						if (data != null) {
							item.top = h;
							h += Math.round(data.height);
							item.bottom = h;
						}

					}).exec();
				})
				this.sizeCalcState = true;
			},
			//小球跳跃动画
			touchOnAddGoods(ele, data, n, row) {
				let q = uni.createSelectorQuery()
				q.select(ele).boundingClientRect(res => {
					this.$nextTick(() => {
						// this.$refs.inCart.addToCart(res, data.id);
					})
				}).exec();
			},
			//新增商品计算价格
			addGoodsChange(type, number, rowData) {
				number = Number(number)
				var that = this;
				let shoppCart = [];
				let totalPrice = 0;
				let totalNumber = 0;
				let existedGoods = false;
				//门店第一次添加商品
				let isFirstAddGoods = true;
				//是否为有规格的商品
				let isFormGoods = false
				if (rowData.current_form) {
					isFormGoods = true
				}
				let deleteGoods = null
				let carts = that.shoppCart;
				if (carts.length != 0) {
					isFirstAddGoods = false
					//根据缓存数据 获取购物车中属于本商店的商品
					for (let i in carts) {
						if (carts[i].store_id == that.storeData.store_id) {
							shoppCart = carts[i].shopping_cart ? carts[i].shopping_cart : [];
							break;
						}
					}
					//检查该商品是否为第一次添加，
					for (var i in shoppCart) {
						// if(shoppCart[i].id == rowData.id){
						// 	// 是多规格商品
						// 	if(isFormGoods){
						// 		//规格相同
						// 		if(shoppCart[i].current_form.id == rowData.current_form.id){
						// 			//数量为0，在购物车中移除该商品
						// 			if(number <= 0){
						// 				deleteGoods = shoppCart[i];
						// 				break;
						// 			}else{
						// 				// 直接修改商品数量，并计算出单品合计
						// 				shoppCart[i].price = rowData.current_form.price
						// 				shoppCart[i].oldprice = rowData.current_form.oldprice
						// 				shoppCart[i].total = number *  rowData.current_form.price
						// 			}
						// 		}
						// 	}else{
						// 		// 不是多规格商品
						// 	}
						// }
						if (shoppCart[i].id == rowData.id) {
							if (isFormGoods) {
								//相同商品比较规格是否也相同
								if (shoppCart[i].current_form.id == rowData.current_form.id) {
									existedGoods = true;
								}
							} else {
								existedGoods = true;
							}
							if (existedGoods) {
								//在购物车中移除该商品
								if (number <= 0) {
									deleteGoods = shoppCart[i];
									break;
								}
								//非第一次添加，直接修改商品数量，并计算出单品合计
								if (isFormGoods) {
									shoppCart[i].price = rowData.current_form.memPrice
									shoppCart[i].oldprice = rowData.current_form.retPrice
									shoppCart[i].total = number * rowData.current_form.memPrice
								} else {
									shoppCart[i].price = rowData.memPrice
									shoppCart[i].total = number * rowData.memPrice
									shoppCart[i].oldprice = rowData.retPrice
								}
								shoppCart[i].number = rowData.number = number
								break;
							}
						}
					}
				}
				//在购物车中移除该商品
				if (deleteGoods != null) {
					if (carts) {
						//根据缓存数据 获取购物车中属于本商店的商品
						for (let i in carts) {
							if (carts[i].store_id == that.storeData.store_id) {
								var index = shoppCart.indexOf(deleteGoods);
								if (index > -1) {
									shoppCart.splice(index, 1);
								}
								carts[i].shopping_cart = shoppCart
								// uni.setStorageSync(that.shoppingCartStorageName,carts);
								that.shoppCart = carts
								break;
							}
						}
						setTimeout(() => {
							this.init();
						}, 100)
					} else {
						that.storeData.shopping_cart = []
						// uni.setStorageSync(that.shoppingCartStorageName,that.storeData);
						that.shoppCart = that.storeData
					}
					return
				}
				//第一次添加
				if (!existedGoods) {
					if (rowData.form) {
						rowData.price = rowData.current_form.memPrice
						rowData.oldprice = rowData.current_form.retPrice
						rowData.total = number * rowData.current_form.memPrice
					} else {
						rowData.total = number * rowData.memPrice
					}
					rowData.number = number;
					shoppCart.push(rowData);
				}
				console.log("计算总价")
				console.log(shoppCart)
				//计算总商品数量和总价
				for (var i in shoppCart) {
					//总价
					totalPrice += shoppCart[i].total
					totalNumber += shoppCart[i].number
				}
				//更改商品列表中的已购买数量
				for (let i in that.goodsList) {
					if (that.goodsList[i].id == rowData.id) {
						that.goodsList[i] = rowData
						break;
					}
				}
				that.goodsTotalPrice = totalPrice
				that.goodsTotalNumber = totalNumber
				that.shoppCart = shoppCart;
				that.storeData.shopping_cart = shoppCart;
				that.setLabelNumber();
				if (isFirstAddGoods) {
					carts.push(that.storeData)
				}
				if (that.goodsTotalNumber == 0) {
					that.hideShoppingCar();
				}
				//购物车商品数据缓存至本地
				// uni.setStorageSync(that.shoppingCartStorageName,carts);
			},

			//计算每类商品购买的总数
			setLabelNumber() {
				let that = this;
				//计算每一类购买商品的总数量
				for (let j in that.categoryList) {
					let n = 0;
					for (var i in that.shoppCart) {
						if (that.shoppCart[i].type_id == that.categoryList[j].id) {
							n += that.shoppCart[i].number;
						}
					}
					that.categoryList[j].number = n;
				}
			},
			//去结算
			jiesuan() {
				if(this.isLogin){
					uni.navigateTo({
						url: `/pages/store/settle?storeNo=${this.storeNo}&cartId=${this.cartId}&goodsTotalPrice=${this.goodsTotalPrice}&id=${this.storeInfo.id}`
					})
				}else{
					toLogin()
				}
			},
			//联系商家
			contact() {
				uni.makePhoneCall({
					phoneNumber: '18470124046'
				});
			},
			showStoreBoxFunc() {
				// this.storeInfoBoxHeight = uni.getSystemInfoSync().screenHeight - 136; 
				// this.$set(this.$data, 'showFoot', false);
				// this.showStoreBox = true;
				// uni.pageScrollTo({
				// 	duration: 0,
				// 	scrollTop: 0
				// })
			},
			hiddenStoreBoxFunc() {
				this.storeInfoBoxHeight = 100;
				this.showStoreBox = false;
				if (this.swiperCurrent == 0) {
					this.$set(this.$data, 'showFoot', true);
				}
			},
			mpClear(e) {
				// TODO nvue 取消冒泡
				e.stopPropagation()
			},
			//显示购物车
			showShoppingCar() {
				if (this.goodsTotalNumber == 0) {
					return;
				}
				this.footHeight = '100%';
				this.showCar = true;
				this.carGoodsScrollTop = 0;
				this.getStoreCartList()
			},
			// 获取购物车列表
			getStoreCartList() {
				let that = this
				getStoreCartList(that.storeNo).then(res => {
					if (res.code == 200) {
						let num = 0,
							total = 0,
							ids = ''
						res.data.forEach(item => {
							num += item.addNum
							total += Number(item.addNum) * Number(item.price)
							ids += item.id + ','
						})
						that.goodsTotalNumber = num
						that.shoppCart = res.data
						that.cartId = ids
						that.goodsTotalPrice = total
					} else if (res.code == 401) {
						let num = 0,
							total = 0,
							ids = ''
						that.shoppCart = uni.getStorageSync('cart');
						that.shoppCart.forEach(item => {
							num += item.addNum
							ids += item.id + ','
							total += Number(item.addNum) * Number(item.memPrice)
						})
						that.goodsTotalNumber = num
						that.cartId = ids
						that.goodsTotalPrice = total
						console.log("获取购物车列表")
						console.log(this.shoppCart)
					}
				})
			},
			//隐藏购物车
			hideShoppingCar() {
				this.footHeight = '0';
				this.showCar = false;
			},
			//清空该门店的购物车
			clearShoppingCart() {
				let that = this;
				that.goodsShow = false
				restCart({
					storeNo: that.storeNo
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '清空成功！',
							duration: 2000
						})
						that.getProducts()
						that.$nextTick(() => {
							that.goodsShow = true
						})
					}else{
						uni.removeStorage({
							key: 'cart',
							success: function (res) {
							}
						});
					}
				})
				that.shoppCart = [];
				that.storeData.shopping_cart = [];
				for (let i in that.shoppingCartAll) {
					if (that.shoppingCartAll[i].store_id == that.storeData.store_id) {
						that.shoppingCartAll[i] = that.storeData
					}
				}
				uni.setStorageSync(that.shoppingCartStorageName, that.shoppingCartAll);

				for (let i in that.goodsList) {
					that.goodsList[i].number = 0;
				}
				for (let i in that.categoryList) {
					that.categoryList[i].number = 0;
				}
				//购物车商品价格合计
				that.goodsTotalPrice = 0;
				//购物车商品数量合计
				that.goodsTotalNumber = 0;
				that.hideShoppingCar();
			},
			hrefGoodsInfo(id) {
				// uni.navigateTo({
				// 	url: '/pages/goods_details/index?id=' + id
				// })
			},
			//拨打电话
			goCall(phone) {
				if (!phone) {
					return;
				}
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				});
			},
			touchStart(e) {
				this.touchData.clientX = e.changedTouches[0].clientX;
				this.touchData.clientY = e.changedTouches[0].clientY;
			},
		}
	}
</script>
<style lang="scss">
	//主题颜色
	$hx-theme-color: #2493F1;
	$hx-theme-color-light: #2493F1;
	.uni-popup .uni-popup__wrapper {
		width: 100%;
	}
	.uni-popup{
		z-index: 9999 !important;
	}
	.add {
		position: fixed;
		right: 60upx;
		top: 300upx;
		z-index: 999;
	}

	.ctn {

		/* border: 1px solid #e3e3e3; */
		width: 100%;
		display: flex;
		justify-content: flex-end;
		overflow: hidden;
		align-items: center;

		.searchCtn {
			display: flex;
			border-radius: 80upx;
			padding: 8upx 12upx;
			line-height: 44upx;
			background: #e0e0e0;
			overflow: hidden;
			align-items: center;
			min-width: 22px;
		}

		.leftBox {
			display: flex;
			width: 53px;
			justify-content: space-between;
			flex: none;
			margin: 0 8px;
		}

		.jrNull {
			/* #ifdef MP */
			width: 95px;
			flex: none;
			/* #endif */
		}
	}


	page {
		background: #ffffff;
	}

	.pay-vip {
		position: relative;
		z-index: 2;
		margin: 20rpx 32rpx;
		padding: 10rpx 20rpx;
		border-radius: 12rpx;
		background: linear-gradient(to right, #ffff, #fff, #FFCFBF);
		box-shadow: 0px 6rpx 16rpx rgba(173, 173, 173, 0.2);

		.title {
			font-size: 30rpx;
			font-weight: bold;
		}

		.sub {
			font-size: 22rpx;
			color: #999;
		}

		.check {
			width: 130rpx;
			text-align: center;
			height: 40rpx;
			line-height: 40rpx;
			border-radius: 20rpx;
			background: #ff4000;
			color: #fff;
			font-size: 22rpx;
		}
	}

	.hx-bb {
		border-bottom: 1px solid $uni-border-color;
	}

	.hx-txt-10 {
		font-size: 10px;
	}

	.hx-txt-12 {
		font-size: 12px;
	}

	.hx-txt-14 {
		font-size: 14px;
	}

	.hx-txt-16 {
		font-size: 16px;
	}

	.hx-txt-18 {
		font-size: 18px;
	}

	.hx-txt-22 {
		font-size: 22px;
	}

	.hx-color-gray {
		color: #bbbbbb;
	}

	.hx-color-white {
		color: #FFFFFF;
	}

	.hx-color-black {
		color: #333333;
	}

	.hx-txt-weigth {
		font-weight: bold;
	}

	.hx-mb-10 {
		margin-bottom: 10px;
	}

	.hx-mt-15 {
		margin-top: 15px;
	}

	.hx-shadow {
		box-shadow: 0px 6upx 16upx rgba(173, 173, 173, 0.2);
	}

	.miniBtn {
		position: relative;
		padding: 0 12px;
		border-radius: 20px;
		height: 24px;
		line-height: 24px;
		text-align: center;
		background: linear-gradient(100deg, #2493F1, #2493F1);
		font-size: 12px;
		color: #fff;

		.num {
			position: absolute;
			right: 0;
			top: -10px;
			width: 18px;
			height: 18px;
			line-height: 18px;
			font-size: 10px;
			color: #fff;
			background-color: #ff5722;
			text-align: center;
			border-radius: 50%;

		}
	}

	.hx-store {
		.header {
			position: relative;
			min-height: 230px;

			&-bg {
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
				width: 100%;
				height: 142px;
			}

			&-bg-black {
				position: absolute;
				left: 0;
				top: 142px;
				bottom: 0;
				z-index: 1;
				background-color: #ffffff;
				width: 100%;
				transition: background-color 0.2s;
			}

			&-bg-gray {
				position: absolute;
				left: 0;
				top: 142px;
				bottom: -16px;
				z-index: 1;
				background-color: #afafaf;
				width: 100%;
				transition: background-color 0.2s;
			}

			&-top-Placeholder {
				height: 105px;
			}

			.storeInfo {
				position: relative;
				z-index: 2;
				background: #ffffff;
				height: 100px;
				border-radius: 6px;
				padding: 12px;
				margin-bottom: 4px;
				transition: all 0.2s;
				width: 94%;
				margin: 0 auto;
				.address{
					width: 90%;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}
				.shrink-box {
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					text-align: center;
					font-size: 20px;
					color: #a2a8ab;
				}

				.storeAvatar {
					position: absolute;
					width: 50px;
					height: 50px;
					right: 16px;
					top: -25px;
					background: #ffffff;
					border-radius: 4px;

				}
			}
		}

		.container {
			// margin: 0 32upx;
		}

		.tabs-box {
			width: 100%;
			// position: sticky;
			top: calc(44px + var(--status-bar-height));
			z-index: 10;
			background-color: white;
			border-bottom: 1px solid #efefef;
			height: 40px;

			.hx-tabs {
				position: relative;
				display: flex;
				height: 100%;

				&-item {
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					width: 70px;
					color: #666666;

					text {
						font-size: 16px;
					}

				}

				&-active {
					color: #333333;
					font-weight: bold;
				}

				&-slider-box {
					position: absolute;
					display: flex;
					justify-content: center;
					bottom: 0;
					width: 70px;
				}

				&-slider {
					display: flex;
					background: #f6d200;
					width: 30px;
					height: 3px;
				}
			}
		}

		.main {
			position: relative;
			background-color: #ffffff;

			#mainSwiper {
				background-color: #eeeeee;
				position: sticky;
				top: calc(40px + 44px + var(--status-bar-height));

				.scroll-items {

					// 商品列表样式
					.category-list {
						width: 100%;
						background-color: #fff;
						display: flex;
						padding-bottom: 50px;

						.left,
						.right {
							background: #fff;
							position: absolute;
							top: 0;
							bottom: 0upx;
						}

						.left {
							width: 24%;
							left: 0upx;
							background-color: #f6f3f3;

							.row {
								width: 100%;
								height: 45px;
								display: flex;
								align-items: center;
								overflow: hidden;
								position: relative;

								.text {
									width: 100%;
									font-size: 14px;
									color: #999999;
									overflow: hidden;
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 2;
									text-align: center;
									padding: 0 16px;
								}

								&-number {
									position: absolute;
									width: 18px;
									height: 18px;
									right: 4px;
									top: 4px;
									background: #ff5722;
									border-radius: 50%;
									line-height: 18px;
									text-align: center;
									font-size: 10px;
									color: #ffffff;
								}

								&.active {
									height: 45px;
									background-color: #fff;

									.text {
										font-size: 14px;

									}
								}
							}

							.row:last-child {
								margin-bottom: 200upx;
							}
						}

						.right {
							width: 76%;
							left: 24%;

							.goodsListBox {
								padding-bottom: 100px;

								.category {
									// 				width: 94%;
									padding: 0 15px 10px 15px;

									.s-item {
										height: 45px;
										line-height: 45px;
										font-size: 16px;
										background: #ffffff;
										color: #555555;
										position: sticky;
										top: 0;
										z-index: 18;
									}

									.list:last-child {
										margin-bottom: 0;
									}

									.list {
										margin-bottom: 20px;
										width: 100%;
										display: flex;
										flex-wrap: wrap;

										.box:first-child {
											.m-store-item {
												margin-top: 0;
											}
										}

										.box {
											width: 100%;

											.m-store-item {
												display: flex;
												flex-direction: row;
												width: 100%;
												justify-content: space-between;
												align-items: flex-end;
												margin-top: 15px;
												margin-bottom: 15px;

												.m-img {
													flex: 0 0 85px;
													height: 85px;
													// background: #eee;
													border-radius: 4px;
												}

												.m-text {
													flex: 1;
													position: relative;
													height: 85px;
													padding: 0 6px;
													display: flex;
													align-content: space-between;
													flex-direction: column;

													.m-title {
														font-size: 16px;
														color: #555555;
														height: 21px;
														font-weight: bold;
													}

													.m-descripe {
														font-size: 12px;
														color: #999999;
														margin-top: 5px;
														height: 35px;
													}

													.m-price-box {
														height: 24px;
														font-weight: bold;
														display: flex;
														flex-direction: row;
														align-items: flex-end;

														.symbol {
															color: #ff582b;
															font-size: 12px;
														}

														.m-price {
															position: relative;
															top: 2px;
															font-size: 18px;
															color: #ff582b;
														}

														.m-old-price {
															margin-left: 3px;
															display: flex;
															flex-direction: row;
															font-size: 10px;
															color: #999999;
															margin-top: 5upx;
															text-decoration: line-through;
															font-weight: normal;
														}
													}

													.m-distance {
														position: absolute;
														right: 0;
														bottom: -4px;
														z-index: 16;
														color: #b2b2b2;
														font-size: 20upx;
														text-align: right;

														.jumpPosition {
															position: absolute;
															bottom: 23px;
															right: 0;
															z-index: 2;
															width: 28px;
															height: 28px;
														}
													}

												}

											}
										}
									}
								}
							}
						}
					}
				}

				.evaluate-box {}

				.business-box {

					.info-list {
						background: #ffffff;
						padding: 0 15px;

						&-container {
							line-height: 46px;
							height: 46px;
							display: flex;
							flex-direction: row;

							[class*="hxicon-"] {
								color: #a2a2a2;
								margin-right: 8px;
							}

							text {
								font-size: 14px;
							}

							.right {

								float: right;
								color: #dddddd;
								display: flex;
								flex-direction: row;
								align-items: center;

								[class*="hxicon-"] {
									color: #dddddd;
									margin-right: 0;
									font-size: 16px;
								}
							}
						}

					}
				}
			}

		}

		.foot {
			position: fixed;
			display: flex;
			z-index: 999;
			justify-content: center;
			align-items: center;
			bottom: 0;
			height: 100%;
			width: 100%;
			.btn-box {
				position: absolute;
				display: flex;
				bottom: 0;
				justify-content: center;
				align-items: center;
				margin: 0;
				height: 70px;
				// width: calc(100% - 20px);
				width: 100%;
				padding: 10px;
				box-sizing: border-box;
				background: #fff;
				box-shadow: 0 0 10px #ccc;
				z-index: 9;
				
				&-left {
					background: #fff;
					border-radius: 50%;
					box-shadow: 0 0 10px #ccc;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-self: center;
					width: 50px;
					height:50px;
					box-sizing: border-box;
					color: #2493F1;
					text-align: center;
					margin-right: 10px;
					.imgBox {
						display: flex;
						text-align: center;
						justify-content: center;

						image {
							width: 20px;
							height: 20px;
						}
					}

					text {
						font-size: 20upx;
					}
				}

				&-line {
					background: #ffffff;
					width: 2px;
					height: 100%;
				}

				&-center {
					height: 100%;
					flex: auto;
					display: flex;
					justify-content: flex-start;
					align-self: center;
					align-items: center;
					background: #2493F1;
					border-radius: 100upx;
					padding: 0 10px;
					box-sizing: border-box;

					.cart {
						position: relative;
						width: 36px;
						height: 36px;

						image {
							width: 90%;
							height: 90%;
						}

						.tag {
							position: absolute;
							right: 0upx;
							top:-10upx;
							height: 18px;
							width: 18px;
							background-color: #fff;
							color: #2493F1;
							border-radius: 50%;
							z-index: 1;
							font-size: 10px;
							text-align: center;
							line-height: 18px;
						}
					}

					.priceBox {
						flex: auto;
					}

				}

				&-right {
					width: 80px;
					height: 30px;
					line-height: 30px;
					text-align: center;
					position: relative;
					display: flex;
					justify-content: flex-start;
					align-self: center;
					align-items: center;
					.pscj {
						width: 100%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-self: center;
						align-items: center;
						background: #bbbbbb !important;
						color: #fff !important;
						font-size: 12px !important;
					}

					.jiesuan {
						width: 100%;
						height: 100%;
						font-size: 28upx;
						border-radius: 100upx;
						text-align: center;
						display: flex;
						justify-content: center;
						align-self: center;
						align-items: center;
						background: #fff;
						color: #2493F1;
						font-weight: bold;
					}
				}
			}

			.zz {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: rgba(0, 0, 0, .7);
				z-index: 1;
			}

			.cart-box {
				display: flex;
				justify-content: flex-start;
				flex-flow: column;
				background: #ffffff;
				position: absolute;
				bottom: 0;
				z-index: 2;
				max-height: 66%;

				padding-bottom: 62px;
				border-top-left-radius: 16px;
				border-top-right-radius: 16px;
				overflow: hidden;
				width: 100%;

				.rebate-box {
					height: 30px;
					background: #2493F1;
					color: #2493F1;
					text-align: center;
					line-height: 30px;
					font-size: 14px;
				}

				.box-container {
					box-sizing: border-box;
					padding: 0 16px;
				}

				.operating-box {
					font-size: 12px;
					line-height: 40px;
					height: 40px;
					border-bottom: 1px solid #f6f6f6;
					color: #666666;
					display: flex;
					flex-direction: row;

					&_right {
						flex: 1;
					}

					&_left {
						display: flex;
						flex-direction: row;
					}

				}

				.goods-box {
					height: 100%;
					overflow: hidden;
					flex: 1;
					display: flex;

					.goods-list-scroll {
						height: 100%;

						.goods-list {

							width: 100%;
							display: flex;
							flex-wrap: wrap;

							.box {
								width: 100%;
								border-bottom: 1px solid #f6f6f6;
								box-sizing: border-box;
								padding: 0 16px;

								.m-store-item {
									display: flex;
									flex-direction: row;
									width: 100%;
									justify-content: space-between;
									align-items: flex-end;
									padding-top: 15px;
									padding-bottom: 15px;

									.m-img {
										flex: 0 0 85px;
										height: 85px;
										background: #eee;
										border-radius: 4px;
									}

									.m-text {
										flex: 1;
										position: relative;
										height: 85px;
										padding: 0 6px;
										display: flex;
										align-content: space-between;
										flex-direction: column;

										.m-title {
											font-size: 16px;
											color: #555555;
											height: 21px;
											font-weight: bold;
										}

										.m-descripe {
											font-size: 12px;
											color: #999999;
											margin-top: 5px;
											height: 35px;
										}

										.m-price-box {
											height: 24px;
											font-weight: bold;
											display: flex;
											flex-direction: row;
											align-items: flex-end;

											.symbol {
												color: #ff582b;
												font-size: 12px;
											}

											.m-price {
												position: relative;
												top: 2px;
												font-size: 18px;
												color: #ff582b;
											}

											.m-old-price {
												margin-left: 3px;
												display: flex;
												flex-direction: row;
												font-size: 10px;
												color: #999999;
												margin-top: 5upx;
												text-decoration: line-through;
												font-weight: normal;
											}
										}

										.m-distance {
											position: absolute;
											right: 0;
											bottom: -4px;
											z-index: 16;
											color: #b2b2b2;
											font-size: 20upx;
											text-align: right;

											.jumpPosition {
												position: absolute;
												bottom: 23px;
												right: 0;
												z-index: 2;
												width: 28px;
												height: 28px;
											}
										}

									}

								}
							}
						}
					}
				}
			}
		}
	}

	.form-main {

		display: flex;
		flex-direction: column;
		justify-content: left;

		.form-main_ctn {
			display: flex;
			flex-direction: column;
			justify-content: left;
			padding: 23px 22px 22px 22px;
			background-color: #fff;
			border-radius: 8px;
			.btn{
				margin-top: 20px;
			}
			.godos_tit {
				margin-top: 4px;
				margin-bottom: 6px;
				
				.img{
					img{
						background: gray;
						width: 100px;
						height: 100px;
						border-radius: 10px;
						margin-right: 20px;
					}
				}
				.info{
					.title{
						color: #171717;
						font-size: 14px;
						margin-bottom: 2px;
					}
					.select{
						height: 50px;
						color: #A4A4A4;
						font-size: 12px;
					}
					.price{
						color: #F75641;
						font-size: 12px;
						text{
							font-weight: bold;
							font-size: 18px;
						}
					}
				}
			}

			.gg_tit {
				margin-top: 8px;
				font-size: 14px;
				font-weight: bold;
				color: #555;
			}

			.gg_box {
				margin-top: 8px;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				font-size: 12;
				color: #333;

				.item {
					margin-right: 14px;
					margin-bottom: 14px;
					padding-left: 2px;
					padding-right: 2px;
					border: 1px solid transparent;
					border-radius: 4px;
					width: 100%;
					height: 30px;
					line-height: 30px;
					text-align: center;
					white-space: nowrap;
					box-sizing: border-box;
					background: #F4F8FB;
				}

				.item.active {
					border-color: #47B6FE;
					background-color: #F2FAFD;
				}

			}

			.select_gg {
				margin: 26px -12px 0;
				padding: 6px 12px;
				color: #999;
				background-color: #f9f9f9;
				display: flex;
				flex-direction: row;

				.lable {}

				.select_gg_box {
					flex: 1;
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;

					.gg-item {
						color: #333;

						.gg-item-cut {
							margin-left: 3px;
							margin-right: 3px;
						}
					}

					.gg-item:last-child {
						.gg-item-cut {
							display: none;
						}
					}
				}

			}

			.bottom {
				position: relative;
				display: flex;
				flex-direction: row;
				margin-top: 12px;

				.price_box {
					flex: 1;
					lign-items: baseline;
					color: #ff582b;
					font-size: 14px;
					position: relative;
					top: 4px;

					.price {
						font-size: 24px;
					}
				}

				.jumpPosition {
					position: absolute;
					right: 16px;
					top: 2px;
				}

				.form-btn-box {
					height: 30px;
					line-height: 30px;

					.add-btn {
						border-radius: 50px;
						background-color: #2493F1;
						padding: 0 12px;
						display: flex;
						height: 30px;
						line-height: 30px;
						align-items: center;
						color: #fff;

						i {
							font-weight: bold;
							font-size: 18px;
							margin-right: 3px;
							margin-left: -4px;
						}

						text {

							font-size: 14px;
							font-weight: bold;
							color: #fff;
						}
					}
				}
			}

		}

		.close {
			position: absolute;
			left: 50%;
			margin-left: -20px;
			bottom: -70px;
			border-radius: 50%;
			height: 40px;
			width: 40px;
			background-color: #fff;
			opacity: 0.7;
			text-align: center;
			line-height: 43px;

			i {
				font-weight: bold;
				font-size: 22px;
			}
		}
	}
</style>